<template>
  <section class='flex comments fade-after'>
    <div class='flex flex-ul'>
      <h5 class="part-title">走心评论</h5>
      <ul class='flex-ul flow-ul no-scrollbar fade-before fade-after'>
        <template v-for='item in comments'>
          <li class='box'>
            <div class='author'>
              <img :src='item.avatar' :alt='item.nickname'
                   class='avatar avatar-48 photo loaded' @error='handleErrorFriendAvatar'>
              <div class='comment-info'>
                <div>{{ item.nickname }}</div>
                <time class='font-small'>{{ timeAgo(new Date(item.createTime)) }}</time>
              </div>
            </div>
            <div class='comment-text'>
              <span class='content' v-html='item.commentContent'></span>
              <span class='post font-small line-clamp'>寒烟志的第「{{ item.id }}」号走心评论</span>
            </div>
          </li>
        </template>
      </ul>
      <nav class='part-btn fade-before fade-after'>
        <div class='comments-btn'>
          <button class="prev" @click="addScrollEventPrev('.comments', 'li')"></button>
          <button class="next" @click="addScrollEventNext('.comments', 'li')"></button>
        </div>
        <div class="more-btn">
          <a href="/message" role="button">
            <span>留下足迹不虚此行</span>
          </a>
          <a class="add" href="/friends/add" role="button">
            <span>添加友联与我同行</span>
          </a>
        </div>
      </nav>
    </div>
  </section>
</template>

<script lang='ts'>
import { defineComponent, onMounted, toRef } from 'vue'
import { handleErrorFriendAvatar } from '@/utils/avatarUtil'
import { useCommentStore } from '@/stores/comment'
import api from '@/api/api'
import { addScrollEventNext, addScrollEventPrev, timeAgo } from '@/utils/commonUtil'

export default defineComponent({
  name: 'MindfulComments',
  methods: { timeAgo, addScrollEventNext, addScrollEventPrev, handleErrorFriendAvatar },
  setup(){
    const commentStore = useCommentStore()
    onMounted(() => {
      MindfulComments()
    })
    const MindfulComments = () => {
      api.getTopSixComments().then(({ data }) => {
        if (data.data.length === 0) {
          commentStore.recentComment = []
        }
        commentStore.recentComment = data.data
      })
    }
    return {
      comments: toRef(commentStore.$state, 'recentComment')
    }
  }
})
</script>
